<template>
  <div class="wrap">
  	<header-v></header-v>
  	<section class="container abouts">
  		<div class="banner"><img v-for="item in banner" :src="item" alt="" /></div>
  		<div class="content">
  			<div class="about" v-for="item in about">
  				<img :src="item.src" alt="" />
  				<div class="content">
  					<p class="title">{{ item.title }}</p>
  					<p>{{ item.content }}</p>
  					<a href="javascript:;">{{ item.btn }}</a>
  				</div>
  			</div>
  			
  			<div class="introduce" :style="carousel_bg">
  				<!-- 轮播  -->
					<div class="carousel">
						<swiper auto loop dots-position='center' height="4.1rem">
				    	<div v-for="item in carousel">
				      	<swiper-item><div class="img"><img :src="item.src" /></div><p>{{ item.desc }}</p><strong>{{ item.title }}</strong></swiper-item>
				      </div>
				    </swiper>
					</div> 
  			</div>
  			
  			<div class="fn">
  				<div v-for="item in fn">
  					<img :src="item.src" alt="" />
  					<p class="title">{{ item.title }}</p>
  					<p>{{ item.content }}</p>
  				</div>
  			</div>
  		</div>
  	</section>
  	<footer-v></footer-v>
  </div>
</template>

<script>
import header from '../public/header'
import footer from '../public/footer'
import banner from '../../assets/banner_2.jpg'
import about from '../../assets/about.jpg'
import carousel_bg from '../../assets/carousel_bg.jpg'
import carousel_item from '../../assets/carousel_item.jpg'
import Icon_2 from '../../assets/Icon_2.png'
import { Swiper, SwiperItem } from 'vux'

export default {
  components: {	
		headerV : header,
		footerV : footer,
		Swiper,
		SwiperItem
  },
  data () {
    return {
    	banner : [banner],
    	carousel_bg : "background:url('"+ carousel_bg +"') center center no-repeat",
    	about : [
    		{
    			src : about,
    			title : '关于我们',
    			content : '采用HTML5最新网页技术，网页界面可随不同屏幕尺寸自动伸缩，实现电脑、微信、手机网站跨平台显示，为终端用户浏览带来最佳用户体验',
    			btn : '了解详情'
    		}
    	],
      carousel : [
    		{
    			src : carousel_item,
    			desc : '企业将智能进行到底，本公司所有模板、功能全部智能。智能提供无上限的空间容量、无上限网站流量，智能支持自有域名绑定，智能提供网站域名备案',
    			title : '古月',
    		},
    		{
    			src : carousel_item,
    			desc : '将智能进行到底，本公司所有模板、功能全部智能。智能提供无上限的空间容量、无上限网站流量，智能支持自有域名绑定，智能提供网站域名备案',
    			title : '古月',
    		},
    		{
    			src : carousel_item,
    			desc : '将智能进行到底，本公司所有模板、功能全部智能。智能提供无上限的空间容量、无上限网站流量，智能支持自有域名绑定，智能提供网站域名备案',
    			title : '古月',
    		}
    	],
    	fn : [
    		{
    			src : Icon_2,
    			title : '海量丰富模板',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		},
    		{
    			src : Icon_2,
    			title : '强大的网页制作能力',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		},
    		{
    			src : Icon_2,
    			title : '第三方对接能力',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		},
    	],
    }
  }
}
</script>


<style type="text/css">
	
	/* about.style */
	.banner img{
		width:100%; height: 1.77rem;
	}
	.abouts .about{
		padding: 0.35rem 0.3rem; text-align: center;
	}
	.abouts .about  img{
		width: 100%;
	}
	.abouts .about .title{
		font-size: 0.22rem; line-height: 0.45rem;
	}
	.abouts .about p:nth-of-type(2){
		color:#696969; font-size: 0.16rem; line-height: 0.3rem;
	}
	.abouts .about a{
		color: #fff; display: block; width: 1.5rem; height: 0.4rem; background: #46c5fc; border-radius: 0.1rem; text-align: center; line-height: 0.4rem; margin:0.3rem auto
	}
	
	.abouts .introduce{
		width: 100%; height: 4.57rem; background-size: 220% 4.57rem !important; margin: 0 auto;
	}
	.abouts .introduce .vux-swiper-item{
		height:0 !important; width:2.6rem !important; margin-left: 0.3rem;
	}
	.abouts .introduce .vux-slider{
		height: 3.8rem !important; text-align: center; color: #fff; padding-top: 0.5rem;
	}
	.abouts .vux-slider p{
		margin-top:0.1rem; line-height: 0.3rem;
	}
	.abouts .vux-slider strong{
		font-size:0.2rem; line-height: 0.4rem;
	}
	.abouts .introduce .img{
		width:1.5rem; height: 1.57rem; border-radius: 50%; position: relative; margin: 0 auto; overflow: hidden;
	}	
	.abouts .vux-slider > .vux-indicator > a > .vux-icon-dot{
		width: 0.1rem !important; height: 0.1rem !important; border-radius: 0.05rem !important; margin-left: 0.04rem; 
	}
	.abouts .vux-slider > .vux-indicator > a > .active{
		background-color: #fff !important;
	}
	.abouts .introduce img{
		width: 100%;
	}
	
	.abouts .fn{
		padding: 0.2rem 0.4rem; text-align: center;
	}
	.abouts .fn img{
		width:0.8rem; height: 0.8rem;
	}
	.abouts .fn .title{
		font-size: 0.18rem; line-height: 0.4rem;
	}
	.abouts .fn div{
		margin-bottom: 0.4rem;
	}
	.abouts .fn p:nth-of-type(2){
		color:#696969;
	}
</style>
